<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
	distributedList:[],
  },
  data() {
    return {
      chart: null,
	  age:[],
	  male:[],
	  female:[],
	  other:[],
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
	    console.log(this.distributedList)
      this.age.push(this.distributedList.age0.ageName); 
	  this.age.push(this.distributedList.age1.ageName);
	  this.age.push(this.distributedList.age2.ageName);
	  this.age.push(this.distributedList.age3.ageName);
	  this.age.push(this.distributedList.age4.ageName);
	  this.age.push(this.distributedList.age5.ageName);
	  this.age.push(this.distributedList.age6.ageName);
	  this.age.push(this.distributedList.age7.ageName);
	  this.age.push(this.distributedList.age8.ageName);
	  this.age.push(this.distributedList.age9.ageName);
	  this.age.push(this.distributedList.age10.ageName);
	  this.age.push(this.distributedList.age11.ageName);
	  this.age.push(this.distributedList.age12.ageName);
	  this.age.push(this.distributedList.age13.ageName);
	  this.age.push(this.distributedList.age14.ageName);
	  this.age.push(this.distributedList.age15.ageName);
	  this.age.push(this.distributedList.age16.ageName);
	  this.age.push(this.distributedList.age17.ageName);
	  this.age.push(this.distributedList.ageother.ageName);
	  
	  this.male.push(this.distributedList.age0.male);
	  this.male.push(this.distributedList.age1.male);
	  this.male.push(this.distributedList.age2.male);
	  this.male.push(this.distributedList.age3.male);
	  this.male.push(this.distributedList.age4.male);
	  this.male.push(this.distributedList.age5.male);
	  this.male.push(this.distributedList.age6.male);
	  this.male.push(this.distributedList.age7.male);
	  this.male.push(this.distributedList.age8.male);
	  this.male.push(this.distributedList.age9.male);
	  this.male.push(this.distributedList.age10.male);
	  this.male.push(this.distributedList.age11.male);
	  this.male.push(this.distributedList.age12.male);
	  this.male.push(this.distributedList.age13.male);
	  this.male.push(this.distributedList.age14.male);
	  this.male.push(this.distributedList.age15.male);
	  this.male.push(this.distributedList.age16.male);
	  this.male.push(this.distributedList.age17.male);
	  this.male.push(this.distributedList.ageother.male);
	  
	  this.female.push(this.distributedList.age0.female);
	  this.female.push(this.distributedList.age1.female);
	  this.female.push(this.distributedList.age2.female);
	  this.female.push(this.distributedList.age3.female);
	  this.female.push(this.distributedList.age4.female);
	  this.female.push(this.distributedList.age5.female);
	  this.female.push(this.distributedList.age6.female);
	  this.female.push(this.distributedList.age7.female);
	  this.female.push(this.distributedList.age8.female);
	  this.female.push(this.distributedList.age9.female);
	  this.female.push(this.distributedList.age10.female);
	  this.female.push(this.distributedList.age11.female);
	  this.female.push(this.distributedList.age12.female);
	  this.female.push(this.distributedList.age13.female);
	  this.female.push(this.distributedList.age14.female);
	  this.female.push(this.distributedList.age15.female);
	  this.female.push(this.distributedList.age16.female);
	  this.female.push(this.distributedList.age17.female);
	  this.female.push(this.distributedList.ageother.female);

	  this.other.push(this.distributedList.age0.other);
	  this.other.push(this.distributedList.age1.other);
	  this.other.push(this.distributedList.age2.other);
	  this.other.push(this.distributedList.age3.other);
	  this.other.push(this.distributedList.age4.other);
	  this.other.push(this.distributedList.age5.other);
	  this.other.push(this.distributedList.age6.other);
	  this.other.push(this.distributedList.age7.other);
	  this.other.push(this.distributedList.age8.other);
	  this.other.push(this.distributedList.age9.other);
	  this.other.push(this.distributedList.age10.other);
	  this.other.push(this.distributedList.age11.other);
	  this.other.push(this.distributedList.age12.other);
	  this.other.push(this.distributedList.age13.other);
	  this.other.push(this.distributedList.age14.other);
	  this.other.push(this.distributedList.age15.other);
	  this.other.push(this.distributedList.age16.other);
	  this.other.push(this.distributedList.age17.other);
	  this.other.push(this.distributedList.ageother.other);

      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          top: 10,
          left: '2%',
          right: '2%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
		  data: this.age,
          //data: ['5', '10', '15', '20', '25', '30','35', '40','45', '50','55', '60','65', '70','75', '80','85','90','>90'],
          axisTick: {
            alignWithLabel: true
          }
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          }
        }],
        series: [{
          name: '男性',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
		  data:this.male,
          //data: [79, 52, 200, 334, 390, 330, 220,79, 52, 200, 334, 390, 330, 220,79, 52, 200, 334, 390],
          animationDuration
        }, {
          name: '女性',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
		  data:this.female,
          //data: [79, 52, 200, 334, 390, 330, 220,79, 52, 200, 334, 390, 330, 220,79, 52, 200, 334, 390],
          animationDuration
        }, {
          name: '未知',
          type: 'bar',
          stack: 'vistors',
          barWidth: '60%',
		  data:this.other,
          //data: [1, 1, 1, 1, 1, 1, 1,1, 1, 1, 1, 1, 1, 1,1, 1, 1, 1, 1],
          animationDuration
        }]
      })
    }
  }
}
</script>
